<template>
	<view class="u-collapse-item" :class="{'line-none': isShow}">
		<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
			<view class="u-collapse-title" :style="[{ textAlign: align ? align : 'left' }]">
				<slot name="header"></slot>
			</view>
		</view>
		<view class="u-collapse-body" 
		:style="[{
				height: isShow ? height + 'px' : '0'
			}, bodyStyle]">
			<view class="u-collapse-content" :id="elId">
				<slot name="body"></slot>
			</view>
		</view>
		<view class="sub__line" v-show="showLine">
			<text @tap.stop="headClick"
			:class="[isShow ? 'iconzhankai': 'iconshousuo']" 
			class="iconfont"></text>
			<view :class="{'hide': !isShow}" class="line"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * collapseItem 手风琴Item
	 * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
	 * @tutorial https://www.uviewui.com/components/collapse.html
	 * @property {String} title 面板标题
	 * @property {String Number} index 主要用于事件的回调，标识那个Item被点击
	 * @property {Boolean} disabled 面板是否可以打开或收起（默认false）
	 * @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
	 * @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
	 * @property {String} align 标题的对齐方式（默认left）
	 * @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
	 * @event {Function} change 某个item被打开或者收起时触发
	 * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
	 */
	import guid from '@/utils/guid'
	export default {
		name: "collapse-item",
		props: {
			// 标题的对齐方式
			align: {
				type: String,
				default: 'left'
			},
			// 是否可以点击收起
			disabled: {
				type: Boolean,
				default: false
			},
			// collapse显示与否
			open: {
				type: Boolean,
				default: false
			},
			// 唯一标识符
			name: {
				type: [Number, String],
				default: ''
			},
			//活动样式
			activeStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			// 标识当前为第几个
			index: {
				type: [String, Number],
				default: ''
			}
		},
		inject: ['uCollapse'],
		data() {
			return {
				isShow: false,
				elId: guid(),
				height: 0, // body内容的高度
				headStyle: {}, // 头部样式，对象形式
				bodyStyle: {}, // 主体部分样式
				arrowColor: '',
				hoverClass: '', // 头部按下时的效果样式类
			};
		},
		mounted() {
			//#ifdef H5
			this.$nextTick(() => {
				this.queryRect();
			});
			//#endif
			//#ifdef MP-WEIXIN
			var pages = getCurrentPages();  
			var page = (pages[pages.length - 1]).route;  
			if(page==='pages/user/index'){
				this.$nextTick(() => {
					this.queryRect();
				});
			}
			
			//#endif
		},
		watch: {
			open(val) {
				this.isShow = val;
			}
		},
		computed: {
			showLine() {
				return this.uCollapse.showLine;
			},
		},
		created() {
			this.isShow = this.open;
			this.nameSync = this.name ? this.name : this.uCollapse.childrens.length;
			this.uCollapse.childrens.push(this);
			this.headStyle = this.uCollapse.headStyle;
			this.bodyStyle = this.uCollapse.bodyStyle;
			this.arrowColor = this.uCollapse.arrowColor;
			this.hoverClass = this.uCollapse.hoverClass;
		},
		methods: {
			// 点击collapsehead头部
			headClick() {
				if (this.disabled) {
					uni.showToast({
						title: "未开课！",
						icon: "none",
						duration: 3000
        	})
					return
				}
				if (this.uCollapse.accordion == true) {
					this.uCollapse.childrens.map(val => {
						// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
						if (this != val) {
							val.isShow = false;
						}
					});
				}

				this.isShow = !this.isShow;
				// 触发本组件的事件
				this.$emit('change', {
					index: this.index,
					show: this.isShow
				})

				// 只有在打开时才发出事件
				if (this.isShow) this.uCollapse.onChange();
				this.queryRect();
				this.$forceUpdate();
			},
			// 查询内容高度
			queryRect() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#' + this.elId)
					.boundingClientRect(data => {
						// console.log(data.height)
						if (!data.height) {
							setTimeout(() => {
								this.queryRect();
							}, 100);
							return;
						}
						this.height = data.height;
					})
					.exec();
			}
		}
	};
</script>

<style lang="scss">
.u-collapse-item{
	position: relative;
	border-bottom: 1rpx solid #EDEDED;
	&.line-none{
		border-bottom:none;
	}
	&:last-child{
		border-bottom:none;
	}
}
.sub__line{
	position: absolute;
	top: 40rpx;
	left: 4%;
	height: calc(100% - 40rpx);
	.iconfont{
		font-size: 36rpx;
		color: $uni-color-primary;
	}
}
.line{
	background-color: rgb(237, 237, 237);
	margin: 0px auto; 
	width: 2px; 
	height: calc(100% - 66rpx);
	transition: all 0.3s;
	&.hide{
		height: 0;
	}
}
	.u-collapse-head {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
	}

	.u-collapse-title {
		flex: 1;
		overflow: hidden;
		font-size: 30rpx;
		color:  #333;
		line-height: 1;
		padding: 24rpx 0;
		text-align: left;
	}

	.u-arrow-down-icon {
		transition: all 0.3s;
		margin-right: 24rpx;
	}

	.u-arrow-down-icon-active {
		transform: rotate(180deg);
		transform-origin: center center;
	}

	.u-collapse-body {
		overflow: hidden;
		transition: all 0.3s;
	}

	.u-collapse-content {
		overflow: hidden;
		font-size: 28rpx;
		color:  #333;
		// padding: 20rpx 0;
	}

</style>
